<template>
  <!-- 卡片视图区域 -->
  <div>
    <el-card>
      <el-row :gutter="20" style="margin-top: 5px">
<!--        <el-col :span="8">-->
<!--          &lt;!&ndash; 搜索与添加区域 &ndash;&gt;-->
<!--          <el-input placeholder="请输入内容" >-->
<!--            <template #append>-->
<!--              <el-icon><search /></el-icon>-->
<!--            </template>-->
<!--          </el-input>-->
<!--        </el-col>-->
        <el-col :span="4">
          <el-button type="primary" @click="addDept">添加权限</el-button>
        </el-col>
      </el-row>

      <el-table
        :data="allAclModule"
        style="width: 100%; margin-bottom: 20px;margin-top: 20px"
        row-key="id"
        border
        stripe
        default-expand-all
        :tree-props="{ children: 'aclModuleList', hasChildren: 'hasChildren' }"
        height="500px"
      >
        <el-table-column
          type="index"
          label="权限id"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="权限名称"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="权限状态"
        >
          <template v-slot="scope">
            {{ scope.row.status === 1 ? '有效' : '无效'  }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template #default="{ row }">
            <!--        <el-row>-->
            <!--          <div>-->
            <el-button type="primary" size="small" :icon="Edit" @click="onEditClick(row)" />
            <el-button type="primary" size="small" :icon="Delete" @click="onDeleteClick(row)" />
            <!--          </div>-->
            <!--        </el-row>-->
          </template>
        </el-table-column>
      </el-table>
<!--      <el-pagination-->
<!--        class="pagination"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleContractCurrentChange"-->
<!--        :current-page="page"-->
<!--        :page-size="size"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--      >-->
<!--      </el-pagination>-->
    </el-card>
  </div>
  <m-dialog v-model="dialogVisible" :title="title" @saveSubmit="submit">
    <el-form :model="form" label-width="120px">
      <el-form-item label="上级模块">
        <el-select v-model="form.parentId" placeholder="-">
          <el-option
            v-for="item in optionSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="请输入权限名称"/>
      </el-form-item>
      <el-form-item label="顺序">
        <el-input v-model="form.sort" placeholder="请输入权限顺序" type="num"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="stateValue" @change="stateChange">
          <el-option
            v-for="item in stateSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
      </el-form-item>
    </el-form>
  </m-dialog>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { addAclModule, getAclModuleList, updateAclModule, deleteAclModule } from '@/api/acl-module'
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import MDialog from '@/components/MDialog/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const title = ref('权限操作')
const isAdd = ref(true)
const stateValue = ref('有效')
const stateSelect = ref([
  {
    label: '有效',
    value: 1
  },
  {
    label: '无效',
    value: 0
  }
])

const total = ref(0)
const page = ref(1)
const size = ref(10)

// const handleContractCurrentChange = async currentPage => {
//   page.value = currentPage
//   await getAclModule()
// }
//
// const handleSizeChange = async currentSize => {
//   size.value = currentSize
//   await getAclModule()
// }

const stateChange = (value) => {
  form.status = value
}

const submit = async () => {
  let result
  if (isAdd.value) {
    result = await addAclModule({
      name: form.name,
      parentId: form.parentId,
      seq: form.sort,
      status: form.status,
      remark: form.remark
    })
  } else {
    result = await updateAclModule({
      id: form.id,
      name: form.name,
      parentId: form.parentId,
      seq: form.sort,
      status: form.status,
      remark: form.remark
    })
  }
  if (result) {
    dialogVisible.value = false
    await getAclModule()
  }
}

const addDept = () => {
  for (const key in form) {
    if (key === 'status') {
      form[key] = 1
    } else if (key === 'parentId') {
      form[key] = 0
    } else {
      form[key] = ''
    }
  }
  isAdd.value = true
  if (!dialogVisible.value) {
    dialogVisible.value = true
  }
}

const onEditClick = (row) => {
  isAdd.value = false
  form.id = row.id
  form.parentId = row.parentId
  form.name = row.name
  form.sort = row.seq
  form.status = row.status
  form.remark = row.remark
  if (!dialogVisible.value) {
    dialogVisible.value = true
  }
}

const onDeleteClick = (row) => {
  ElMessageBox.confirm('你确定要删除吗？')
    .then(() => {
      deleteAclModule(row.id).then((result) => {
        if (result) {
          ElMessage.info('删除成功')
          getAclModule()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      // catch error
      ElMessage.error('删除失败')
    })
}

const allAclModule = ref([])
const getAclModule = async () => {
  allAclModule.value = await getAclModuleList()
  console.log('allAclModule.value : ' + JSON.stringify(allAclModule.value))
  recursiveRenderAclModule(allAclModule.value)
  console.log('aclModuletMap' + JSON.stringify(aclModuletMap))
  optionSelect = ref([
    {
      value: 0,
      label: '-'
    }
  ])
  console.log('recursiveRenderAclModuleSelect' + JSON.stringify(optionSelect.value))
  recursiveRenderAclModuleSelect(allAclModule.value, 1)
  console.log('optionSelect : ' + JSON.stringify(optionSelect.value))
}
getAclModule()

const aclModuletMap = new Map()
const recursiveRenderAclModule = (aclModuleList) => {
  if (aclModuleList && aclModuleList.length > 0) {
    aclModuleList.forEach((aclModule) => {
      console.log('index : ' + aclModule.id)
      console.log('item : ' + JSON.stringify(aclModule))
      aclModuletMap[aclModule.id] = aclModule
      if (aclModule.aclModuleList.length > 0) {
        recursiveRenderAclModule(aclModule.aclModuleList)
      }
    })
  }
}

let optionSelect = ref([
  {
    value: 0,
    label: '-'
  }
])
const recursiveRenderAclModuleSelect = (aclModuleList, level) => {
  level = level | 0
  if (aclModuleList && aclModuleList.length > 0) {
    aclModuleList.forEach((aclModule) => {
      console.log('index : ' + aclModule.id)
      console.log('item : ' + JSON.stringify(aclModule))
      aclModuletMap[aclModule.id] = aclModule
      let blank = ''
      if (level > 1) {
        for (let j = 3; j <= level; j++) {
          blank += '..'
        }
        blank += '∟'
      }
      optionSelect.value.push({
        value: aclModule.id,
        label: blank + aclModule.name
      })
      if (aclModule.aclModuleList.length > 0) {
        recursiveRenderAclModuleSelect(aclModule.aclModuleList, level + 1)
      }
    })
  }
}

const form = reactive({
  id: 0,
  parentId: 0,
  name: '',
  sort: 1,
  status: 1,
  remark: ''
})

</script>

<style lang="scss" scoped>
@import '~@/style/mixin.scss';
@import '~@/style/variables.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.el-card {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
</style>
